<template>
  <div class="region-agent-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-office-building"></i>
          区域代理管理
        </span>
        <div class="header-actions">
          <el-button type="primary" @click="handleAddRegionAgent" icon="el-icon-plus">
            新增区域代理
          </el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="loadRegionAgentList">刷新数据</el-button>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="区域代理名称">
            <el-input v-model="searchForm.name" placeholder="请输入区域代理名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="searchForm.phone" placeholder="请输入联系电话" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 区域代理列表表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="regionAgentList"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadRegionAgentList"
        border
        stripe>
        <!-- 身份证号列 -->
        <template #idNo="{ row }">
          {{ maskIdNo(row.idNo) }}
        </template>

        <!-- 管理商家数列 -->
        <template #merchantCount="{ row }">
          <el-tag type="info" size="small">{{ row.merchantCount || 0 }}</el-tag>
        </template>

        <!-- 管理业务员数列 -->
        <template #salesmanCount="{ row }">
          <el-tag type="success" size="small">{{ row.salesmanCount || 0 }}</el-tag>
        </template>

        <!-- 状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusType(row.deleted)" size="small">
            {{ getStatusText(row.deleted) }}
          </el-tag>
        </template>

        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <!-- 查看详情 -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(row)">
              查看
            </el-button>

            <!-- 编辑 -->
            <el-button
              size="mini"
              type="text"
              class="edit-btn"
              icon="el-icon-edit"
              @click="handleEdit(row)">
              编辑
            </el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 新增区域代理对话框 -->
    <el-dialog
      title="新增区域代理"
      :visible.sync="addDialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="120px" class="add-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="区域代理名称" prop="name">
              <div class="input-with-icon">
                <i class="el-icon-office-building form-icon"></i>
                <el-input v-model="addForm.name" placeholder="请输入区域代理名称" maxlength="50"></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <div class="input-with-icon">
                <i class="el-icon-phone form-icon"></i>
                <el-input v-model="addForm.phone" placeholder="请输入联系电话" maxlength="11"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idNo">
              <div class="input-with-icon">
                <i class="el-icon-postcard form-icon"></i>
                <el-input v-model="addForm.idNo" placeholder="请输入身份证号" maxlength="18"></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password">
              <div class="input-with-icon">
                <i class="el-icon-lock form-icon"></i>
                <el-input
                  v-model="addForm.password"
                  type="password"
                  placeholder="请输入登录密码，默认为123456"
                  maxlength="50"
                  show-password>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责区域" prop="regionName">
              <div class="input-with-icon">
                <i class="el-icon-map-location form-icon"></i>
                <el-input v-model="addForm.regionName" placeholder="请输入负责区域" maxlength="50"></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域编码" prop="regionCode">
              <div class="input-with-icon">
                <i class="el-icon-tickets form-icon"></i>
                <el-input v-model="addForm.regionCode" placeholder="请输入区域编码" maxlength="20"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <div class="input-with-icon">
                <i class="el-icon-location form-icon"></i>
                <el-input v-model="addForm.address" placeholder="请输入详细地址" maxlength="200"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="邮箱地址" prop="email">
              <div class="input-with-icon">
                <i class="el-icon-message form-icon"></i>
                <el-input v-model="addForm.email" placeholder="请输入邮箱地址" type="email"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注信息" prop="remark">
              <div class="input-with-icon textarea-wrapper">
                <i class="el-icon-document form-icon textarea-icon"></i>
                <el-input
                  v-model="addForm.remark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息（可选），不超过200个字符"
                  maxlength="200"
                  show-word-limit>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd" :loading="addLoading">确定新增</el-button>
      </div>
    </el-dialog>

    <!-- 区域代理详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="view-dialog"
      top="5vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-office-building"></i>
        <span>区域代理详情</span>
      </div>

      <div class="detail-content" v-if="currentRegionAgent">
        <!-- 头部信息卡片 -->
        <div class="detail-header">
          <div class="avatar-section">
            <div class="avatar-circle">
              <img v-if="currentRegionAgent.avatar" :src="currentRegionAgent.avatar" class="avatar-img" alt="商家头像" />
              <i v-else class="el-icon-s-shop"></i>
            </div>
            <div class="status-badge">
              <el-tag :type="getStatusType(currentRegionAgent.deleted)" size="small">
                {{ getStatusText(currentRegionAgent.deleted) }}
              </el-tag>
            </div>
          </div>
          <div class="header-info">
            <h3 class="agent-name">{{ currentRegionAgent.name }}</h3>
            <div class="agent-phone-display">
              <i class="el-icon-phone"></i>
              <span>{{ currentRegionAgent.phone }}</span>
            </div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-user"></i>
            <span>基本信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-postcard"></i>
                <span>身份证号</span>
              </div>
              <div class="info-value">{{ maskIdNo(currentRegionAgent.idNo) }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-message"></i>
                <span>邮箱地址</span>
              </div>
              <div class="info-value">{{ currentRegionAgent.email || '未填写' }}</div>
            </div>
            <div class="info-item full-width">
              <div class="info-label">
                <i class="el-icon-location"></i>
                <span>详细地址</span>
              </div>
              <div class="info-value">{{ currentRegionAgent.address || '未填写' }}</div>
            </div>
          </div>
        </div>

        <!-- 区域信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-map-location"></i>
            <span>区域信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-place"></i>
                <span>负责区域</span>
              </div>
              <div class="info-value">{{ currentRegionAgent.regionName || '未指定' }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-tickets"></i>
                <span>区域编码</span>
              </div>
              <div class="info-value region-code">{{ currentRegionAgent.regionCode || '未填写' }}</div>
            </div>
          </div>
        </div>

        <!-- 管理数据 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-data-line"></i>
            <span>管理数据</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-s-shop"></i>
                <span>管理商家数</span>
              </div>
              <div class="info-value">
                <el-tag type="info" size="medium">{{ currentRegionAgent.merchantCount || 0 }} 个</el-tag>
              </div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-s-custom"></i>
                <span>管理业务员数</span>
              </div>
              <div class="info-value">
                <el-tag type="success" size="medium">{{ currentRegionAgent.salesmanCount || 0 }} 个</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-time"></i>
            <span>时间信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-date"></i>
                <span>创建时间</span>
              </div>
              <div class="info-value time-value">{{ currentRegionAgent.createTime }}</div>
            </div>
            <div class="info-item" v-if="currentRegionAgent.updateTime">
              <div class="info-label">
                <i class="el-icon-refresh"></i>
                <span>更新时间</span>
              </div>
              <div class="info-value time-value">{{ currentRegionAgent.updateTime }}</div>
            </div>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="info-section" v-if="currentRegionAgent.remark">
          <div class="section-title">
            <i class="el-icon-document"></i>
            <span>备注信息</span>
          </div>
          <div class="remark-content">
            {{ currentRegionAgent.remark }}
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- 编辑区域代理对话框 -->
    <el-dialog
      :visible.sync="editDialogVisible"
      width="700px"
      :close-on-click-modal="false"
      custom-class="action-dialog"
      top="8vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-edit"></i>
        <span>编辑区域代理信息</span>
      </div>

      <div class="edit-content" v-if="currentRegionAgent">
        <!-- 区域代理基础信息展示 -->
        <div class="agent-base-info">
          <div class="base-info-item">
            <div class="base-label">
              <i class="el-icon-office-building"></i>
              区域代理名称
            </div>
            <div class="base-value">{{ currentRegionAgent.name }}</div>
          </div>
          <div class="base-info-item">
            <div class="base-label">
              <i class="el-icon-phone"></i>
              联系电话
            </div>
            <div class="base-value">{{ currentRegionAgent.phone }}</div>
          </div>
        </div>

        <!-- 可编辑表单 -->
        <div class="edit-form-section">
          <div class="form-section-title">
            <i class="el-icon-edit-outline"></i>
            <span>可编辑信息</span>
          </div>
          <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" class="edit-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="负责区域" prop="regionName">
                  <div class="input-with-icon">
                    <i class="el-icon-map-location form-icon"></i>
                    <el-input
                      v-model="editForm.regionName"
                      placeholder="请输入负责区域"
                      maxlength="50">
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="区域编码" prop="regionCode">
                  <div class="input-with-icon">
                    <i class="el-icon-tickets form-icon"></i>
                    <el-input
                      v-model="editForm.regionCode"
                      placeholder="请输入区域编码"
                      maxlength="20">
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="邮箱地址">
                  <div class="input-with-icon">
                    <i class="el-icon-message form-icon"></i>
                    <el-input
                      v-model="editForm.email"
                      placeholder="请输入邮箱地址"
                      type="email">
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="详细地址">
                  <div class="input-with-icon textarea-wrapper">
                    <i class="el-icon-location form-icon textarea-icon"></i>
                    <el-input
                      v-model="editForm.address"
                      placeholder="请输入详细地址，不超过200个字符"
                      maxlength="200"
                      type="textarea"
                      :rows="3"
                      show-word-limit>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="submitEdit" :loading="editLoading" size="medium">
          <i class="el-icon-check"></i>
          确定修改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRegionAgentPage,
  getRegionAgentDetail,
  addRegionAgent,
  editRegionAgent
} from '@/api/aggregation'

export default {
  name: 'RegionAgentManagement',
  data() {
    return {
      loading: false,
      regionAgentList: [],

      // 表格列配置
      tableColumns: [
        { prop: 'id', label: 'ID', minWidth: 80, align: 'center' },
        { prop: 'name', label: '区域代理名称', minWidth: 150, align: 'center', showOverflowTooltip: true },
        { prop: 'phone', label: '联系电话', minWidth: 140, align: 'center' },
        { prop: 'idNo', label: '身份证号', minWidth: 180, align: 'center', showOverflowTooltip: true, slot: 'idNo' },
        { prop: 'address', label: '详细地址', minWidth: 200, showOverflowTooltip: true },
        { prop: 'regionName', label: '负责区域', minWidth: 120, align: 'center' },
        { prop: 'merchantCount', label: '管理商家数', minWidth: 120, align: 'center', slot: 'merchantCount' },
        { prop: 'salesmanCount', label: '管理业务员数', minWidth: 130, align: 'center', slot: 'salesmanCount' },
        { prop: 'deleted', label: '状态', minWidth: 100, align: 'center', slot: 'status' },
        { prop: 'createTime', label: '创建时间', minWidth: 160, align: 'center' },
        { label: '操作', minWidth: 200, align: 'center', slot: 'actions' }
      ],

      // 搜索表单
      searchForm: {
        name: '',
        phone: ''
      },

      // 分页
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 新增对话框
      addDialogVisible: false,
      addLoading: false,
      addForm: {
        name: '',
        phone: '',
        idNo: '',
        email: '',
        password: '123456', // 默认密码
        regionName: '',
        regionCode: '',
        address: '',
        remark: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入区域代理名称', trigger: 'blur' },
          { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        idNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 50, message: '密码长度在 6 到 50 个字符', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        regionName: [
          { required: true, message: '请输入负责区域', trigger: 'blur' },
          { min: 2, max: 50, message: '区域名称长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        regionCode: [
          { required: true, message: '请输入区域编码', trigger: 'blur' },
          { min: 2, max: 20, message: '区域编码长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 5, max: 200, message: '地址长度在 5 到 200 个字符', trigger: 'blur' }
        ]
      },

      // 详情对话框
      detailDialogVisible: false,
      currentRegionAgent: null,

      // 编辑对话框
      editDialogVisible: false,
      editLoading: false,
      editForm: {
        regionName: '',
        regionCode: '',
        address: '',
        email: ''
      },
      editRules: {
        regionName: [
          { required: true, message: '请输入负责区域', trigger: 'blur' },
          { min: 2, max: 50, message: '区域名称长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        regionCode: [
          { required: true, message: '请输入区域编码', trigger: 'blur' },
          { min: 2, max: 20, message: '区域编码长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadRegionAgentList()
  },
  methods: {
    // 加载区域代理列表
    async loadRegionAgentList() {
      this.loading = true
      try {
        Logger.log('=== 加载区域代理列表 ===')

        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          ...this.searchForm
        }

        Logger.log('请求参数:', params)
        const response = await getRegionAgentPage(params)
        Logger.log('区域代理列表API响应:', response)

        if (response.code === 0) {
          this.regionAgentList = response.data.list || []
          this.pagination.total = response.data.total || 0
        } else {
          this.$message.error('加载区域代理列表失败')
          this.regionAgentList = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载区域代理列表失败:', error)
        this.$message.error('加载区域代理列表失败')
        this.regionAgentList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadRegionAgentList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        phone: ''
      }
      this.pagination.current = 1
      this.loadRegionAgentList()
    },

    // 新增区域代理
    handleAddRegionAgent() {
      this.addForm = {
        name: '',
        phone: '',
        idNo: '',
        email: '',
        password: '123456', // 默认密码
        regionName: '',
        regionCode: '',
        address: '',
        remark: ''
      }
      this.addDialogVisible = true
    },

    // 提交新增
    async submitAdd() {
      try {
        await this.$refs.addForm.validate()
        this.addLoading = true

        Logger.log('=== 新增区域代理 ===')
        Logger.log('表单数据:', this.addForm)

        // 提交数据，密码字段已在表单中
        const response = await addRegionAgent(this.addForm)
        Logger.log('新增区域代理API响应:', response)

        if (response.code === 0) {
          this.$message.success('区域代理新增成功')
          this.addDialogVisible = false
          this.loadRegionAgentList()
        } else {
          this.$message.error(response.data?.msg || '新增失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('新增区域代理失败:', error)
          this.$message.error('新增失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.addLoading = false
      }
    },

    // 查看详情
    async handleView(row) {
      try {
        Logger.log('=== 查看区域代理详情 ===')
        Logger.log('区域代理ID:', row.id)

        const response = await getRegionAgentDetail({id: row.id})
        Logger.log('区域代理详情API响应:', response)

        if (response.code === 0) {
          this.currentRegionAgent = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error('获取区域代理详情失败')
        }
      } catch (error) {
        Logger.error('获取区域代理详情失败:', error)
        this.$message.error('获取区域代理详情失败')
      }
    },

    // 编辑区域代理
    async handleEdit(row) {
      try {
        Logger.log('=== 编辑区域代理 ===')
        Logger.log('区域代理ID:', row.id)

        // 先获取完整详情数据，确保包含所有字段
        const response = await getRegionAgentDetail({id: row.id})
        Logger.log('区域代理详情API响应:', response)

        if (response.code === 0) {
          this.currentRegionAgent = response.data
          // 填充编辑表单
          this.editForm = {
            regionName: response.data.regionName || '',
            regionCode: response.data.regionCode || '',
            address: response.data.address || '',
            email: response.data.email || ''
          }
          this.editDialogVisible = true
        } else {
          this.$message.error('获取区域代理详情失败')
        }
      } catch (error) {
        Logger.error('获取区域代理详情失败:', error)
        this.$message.error('获取区域代理详情失败')
      }
    },

    // 提交编辑
    async submitEdit() {
      try {
        await this.$refs.editForm.validate()
        this.editLoading = true

        Logger.log('=== 更新区域代理信息 ===')
        Logger.log('区域代理ID:', this.currentRegionAgent.id)
        Logger.log('更新数据:', this.editForm)

        const updateData = {
          id: this.currentRegionAgent.id,
          ...this.editForm
        }

        const response = await editRegionAgent(updateData)
        Logger.log('更新区域代理API响应:', response)

        if (response.code === 0) {
          this.$message.success('区域代理信息更新成功')
          this.editDialogVisible = false
          this.loadRegionAgentList()
        } else {
          this.$message.error(response.data?.msg || '更新失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('更新区域代理失败:', error)
          this.$message.error('更新失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.editLoading = false
      }
    },

    // 获取状态类型
    getStatusType(deleted) {
      // deleted === 0 表示正常，deleted !== 0 表示已删除
      return deleted === 0 ? 'success' : 'danger'
    },

    // 获取状态文本
    getStatusText(deleted) {
      // deleted === 0 表示正常，deleted !== 0 表示已删除
      return deleted === 0 ? '正常' : '已删除'
    },

    // 遮罩身份证号
    maskIdNo(idNo) {
      if (!idNo) return '未填写'
      if (idNo.length < 10) return idNo
      return idNo.substring(0, 6) + '****' + idNo.substring(idNo.length - 4)
    }
  }
}
</script>

<style scoped>
.region-agent-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-btn {
  color: #E6A23C !important;
}

.edit-btn:hover {
  background-color: #fdf6ec;
  color: #E6A23C !important;
}

/* 表格样式 */
::v-deep .el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

::v-deep .el-table th {
  background: #fafafa;
  color: #303133;
  font-weight: 600;
}

::v-deep .el-table td {
  padding: 12px 0;
}

::v-deep .el-table .cell {
  padding: 0 12px;
}

/* ===== 对话框标题样式 ===== */
.dialog-title-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.dialog-title-wrapper i {
  margin-right: 8px;
  font-size: 20px;
  color: #409eff;
}

/* ===== 区域代理详情对话框样式 ===== */
.detail-content {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* 头部信息区域 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.detail-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.detail-header::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

/* 头像区域 */
.avatar-section {
  position: relative;
  z-index: 1;
}

.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.3);
}

.avatar-circle i {
  font-size: 36px;
  color: #667eea;
}

.avatar-circle .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  z-index: 2;
}

.status-badge .el-tag {
  border-radius: 12px;
  padding: 4px 10px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 头部信息文字 */
.header-info {
  flex: 1;
  color: white;
  z-index: 1;
}

.agent-name {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.agent-phone-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  display: inline-flex;
  font-weight: 600;
  font-size: 14px;
}

.agent-phone-display i {
  font-size: 16px;
}

/* 信息区块 */
.info-section {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.info-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.section-title i {
  font-size: 16px;
  color: #409eff;
}

.info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.info-label i {
  font-size: 14px;
  color: #c0c4cc;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
}

.info-value:hover {
  background: #f0f2f5;
  border-color: #d4d7dc;
}

.time-value {
  font-size: 13px;
  color: #606266;
}

.region-code {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #409eff;
}

/* 备注内容 */
.remark-content {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
  margin: 0 20px 20px;
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
  border-left: 3px solid #409eff;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .avatar-circle {
    width: 70px;
    height: 70px;
  }

  .avatar-circle i {
    font-size: 32px;
  }

  .agent-name {
    font-size: 20px;
  }
}

/* ===== 编辑区域代理对话框样式 ===== */
.edit-content {
  padding: 0;
}

/* 区域代理基础信息展示 */
.agent-base-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  border: 1px solid #dcdfe6;
}

.base-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.base-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

.base-label i {
  margin-right: 4px;
  color: #c0c4cc;
}

.base-value {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  padding: 6px 10px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

/* 可编辑表单区 */
.edit-form-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e4e7ed;
}

.form-section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f0f0;
}

.form-section-title i {
  margin-right: 8px;
  font-size: 16px;
  color: #67c23a;
}

.edit-form {
  margin-top: 0;
}

/* 表单项优化（新增和编辑表单） */
.add-form .el-form-item,
.edit-form .el-form-item {
  margin-bottom: 24px;
}

.add-form .el-form-item__label,
.edit-form .el-form-item__label {
  font-weight: 600;
  color: #606266;
  font-size: 14px;
  line-height: 40px;
  padding-right: 16px;
}

.input-with-icon {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.form-icon {
  position: absolute;
  left: 14px;
  color: #c0c4cc;
  font-size: 16px;
  z-index: 10;
  pointer-events: none;
  transition: color 0.3s ease;
}

/* 针对单行输入框的图标定位 */
.input-with-icon:not(.textarea-wrapper) .form-icon {
  top: 50%;
  transform: translateY(-50%);
}

/* 针对多行输入框（textarea）的图标定位 */
.input-with-icon.textarea-wrapper .form-icon {
  top: 15px;
  transform: none;
}

/* 使用深度选择器确保样式生效 - 输入框样式优化 */
.input-with-icon >>> .el-input__inner {
  padding-left: 42px !important;
  height: 40px;
  line-height: 40px;
  border-radius: 6px;
  border-color: #e4e7ed;
  transition: all 0.3s ease;
  font-size: 14px;
}

.input-with-icon >>> .el-input__inner:hover {
  border-color: #c0c4cc;
}

.input-with-icon >>> .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.input-with-icon .el-input__inner:focus + .form-icon,
.input-with-icon .el-input:hover .form-icon {
  color: #409eff;
}

/* Textarea 样式优化 */
.input-with-icon >>> .el-textarea__inner {
  padding: 12px 12px 12px 42px !important;
  border-radius: 6px;
  border-color: #e4e7ed;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
}

.input-with-icon >>> .el-textarea__inner:hover {
  border-color: #c0c4cc;
}

.input-with-icon >>> .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 字数统计样式 */
.input-with-icon .el-input__count {
  background: transparent;
  color: #909399;
  font-size: 12px;
}

/* placeholder 样式 */
.add-form .el-input__inner::placeholder,
.add-form .el-textarea__inner::placeholder,
.edit-form .el-input__inner::placeholder,
.edit-form .el-textarea__inner::placeholder {
  color: #c0c4cc;
  font-size: 13px;
}

/* 输入框禁用状态 */
.input-with-icon .el-input.is-disabled .el-input__inner,
.input-with-icon .el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #909399;
  cursor: not-allowed;
}

.input-with-icon .el-input.is-disabled .form-icon {
  color: #c0c4cc;
}

/* InputNumber 样式 */
.input-with-icon .el-input-number {
  width: 100%;
}

.input-with-icon .el-input-number .el-input__inner {
  padding-left: 42px;
  padding-right: 40px;
  text-align: left;
  height: 40px;
  line-height: 40px;
}

/* 表单验证错误样式 */
.add-form .el-form-item.is-error .el-input__inner,
.add-form .el-form-item.is-error .el-textarea__inner,
.edit-form .el-form-item.is-error .el-input__inner,
.edit-form .el-form-item.is-error .el-textarea__inner {
  border-color: #f56c6c;
}

.add-form .el-form-item.is-error .form-icon,
.edit-form .el-form-item.is-error .form-icon {
  color: #f56c6c;
}

.add-form .el-form-item__error,
.edit-form .el-form-item__error {
  font-size: 12px;
  line-height: 1.5;
  padding-top: 6px;
  padding-left: 42px;
}

/* 行间距优化 */
.add-form .el-row,
.edit-form .el-row {
  margin-bottom: -24px;
}

.add-form .el-col,
.edit-form .el-col {
  margin-bottom: 0;
}

/* ===== 对话框底部样式 ===== */
.dialog-footer {
  text-align: center;
  padding: 16px 0 0;
  border-top: 1px solid #f0f0f0;
}

.dialog-footer .el-button {
  min-width: 100px;
  padding: 10px 20px;
  font-weight: 500;
}

.dialog-footer .el-button i {
  margin-right: 4px;
}

/* ===== 响应式优化 ===== */
@media screen and (max-width: 768px) {
  .agent-base-info {
    grid-template-columns: 1fr;
  }
}

/* ===== 自定义滚动条 ===== */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
